<template>
	<div>
		<el-menu
			class="el-menu-vertical-demo"
			background-color="#333744"
			text-color="#fff"
			active-text-color="#4097ff"
			unique-opened
			:collapse="$store.state.AsideMenu.fold"
			:collapse-transition="false"
			router
			:default-active="address"
		>
			<!-- 一级导航 -->
			<el-submenu :index="item.id + ''" v-for="item in list" :key="item.id">
				<template slot="title">
					<i :class="['iconfont', icons[item.id]]"></i>
					<span>{{ item.authName }}</span>
				</template>
				<!-- 二级导航 -->
				<MenuChildren :listChildren="item.children" />
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import MenuChildren from './MenuChildren.vue'
export default {
	name: 'MenuAside',
	props: ['list'],
	data() {
		return {
			icons: {
				125: 'icon-user',
				103: 'icon-tijikongjian',
				101: 'icon-shangpin',
				102: 'icon-danju',
				145: 'icon-baobiao',
			},
			address: '',
		}
	},
	components: {
		MenuChildren,
	},
	mounted() {
		this.$bus.$on('add', data => {
			this.address = data
		})
	},
}
</script>

<style scoped>
i {
	margin-right: 7px;
}
.el-menu {
	border: 0;
}
</style>
